<template>
	<view class="container">
		<view class="header">
			<view class="arrow" @tap="$back()"><image src="../../static/images/arrow_left.png" mode="aspectFit"></image></view>
			<view class="text f36 cfff">规格属性列表</view>
			<view class="btn">
				<view class="define f30" @tap="confirm()">确定</view>
			</view>
		</view>
		<view class="tipBox"><view class="text f28 c666">温馨提示：规格名称不能修改，只能删除。</view></view>

		<view class="listBox" v-show="showBox">
			<view class="list-item" v-for="(i, index) in list" :key="index">
				<view class="checkbox" @click.stop="changeImg(index)">
					<image src="../../static/images/checkbox.png" mode="aspectFit" v-show="!i.isok"></image>
					<image src="../../static/images/checkbox-on.png" mode="aspectFit" v-show="i.isok"></image>
				</view>
				<view class="text f32 c333">{{ i.name }}</view>
			</view>
		</view>

		<view style="height: 130upx;"></view>
		<view class="fiexd-add" @click="open">
			<view class="text f32 cfff">
				<image src="../../static/images/tb_icon.png" mode="aspectFit"></image>
				添加规格属性
			</view>
		</view>

		<!-- 添加规格属性弹窗 -->
		<uni-popup ref="popup" type="center">
			<view class="addContent">
				<view class="box">
					<view class="tit tCenter f36 c333">请输入属性名称</view>
					<view class="input-box"><input type="text" placeholder="最多输入10个字符" v-model="name" /></view>
					<view class="btn f30 tCenter">
						<view class="dropBtn" @click="close">取消</view>
						<view class="submit" @click="define">确定</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>

import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	components: {
		uniPopup
	},
	data() {
		return {
			list: uni.getStorageSync('list') || [],
			showBox: true,
			name: '',
		
		};
	},
	onShow() {
		this.list=uni.getStorageSync('list') || []
	},
	onLoad() {
		this.list = [];
		this.list.map((item, index) => {
			console.log(index);
			this.list[index].isok = false;
		});

	},
	methods: {
		open() {
			this.$refs.popup.open();
		},
		close() {
			this.$refs.popup.close();
		},
		define(){
			let that = this;
			if(this.name==''){
				this.$sToast('属性名称不能为空')
			}else{
				that.list.unshift({
					name:that.name,
					isok:false
				})
				uni.setStorageSync('list',that.list)
				that.name=''
				this.$refs.popup.close();
			}
			
		},
		changeImg(index) {
			let list = this.list;
			list[index].isok = !list[index].isok;
			this.list = list;
			this.$set(this.list, index, list[index]);
			console.log(index)
			
		},
		confirm(){
			let list02=this.list.filter((item)=>{
				return item.isok==true
			})
			uni.setStorageSync('list02',list02)
			this.$back()
		}
	
	
	}
};
</script>

<style lang="scss">
.header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background-color: #249af6;
	padding: 60upx 30upx 25upx 30upx;
	text-align: center;

	.arrow {
		image {
			width: 20upx;
			height: 40upx;
		}
	}

	.btn {
		display: flex;
		flex-direction: row;
		color: #fff;

		.define {
			margin-left: 30upx;
		}
	}
}

.tipBox {
	background-color: #f7f4f8;
	padding: 25upx 30upx;
}

.listBox {
	.list-item {
		border-bottom: 2upx #eee solid;
		padding: 40upx 30upx;
		display: flex;
		flex-direction: row;
		align-items: center;

		.checkbox {
			image {
				width: 50upx;
				height: 50upx;
				margin-right: 35upx;
				vertical-align: middle;
			}
		}
	}
}

// 选择弹出
.chooseBox {
	width: 100%;
	padding-top: 30upx;
	.choose-item {
		width: 100%;
		height: 100%;
		display: flex;
		flex: 1;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 30upx 35upx 30upx;
		margin-bottom: 35upx;
		border-bottom: 2upx #eee solid;
		box-sizing: border-box;
		.arrow {
			image {
				width: 20upx;
				height: 35upx;
			}
		}
	}
}

.fiexd-add {
	width: 100%;
	position: fixed;
	bottom: 0;
	height: 100upx;
	line-height: 100upx;
	background-color: #249af6;

	.text {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;

		image {
			width: 36upx;
			height: 36upx;
			margin-right: 20upx;
		}
	}
}
</style>
